<template>
  <div>
    <a-tabs @tabClick="tabClick" hideAdd v-model="activeKey" type="editable-card" @edit="onEdit">
      <a-tab-pane
        v-for="pane in getPanes"
        :tab="pane.title"
        :key="pane.key"
        :activeKey="activeKey"
        :closable="pane.closable"
        @tabClick="tabClick"
      ></a-tab-pane>
      <span slot="tabBarExtraContent">
        <a-popover placement="bottom">
          <template slot="content">
            <a-button
              style="margin-bottom:10px;display:block"
              size="small"
              @click="CloseOther()"
            >关闭其他</a-button>
            <a-button size="small" @click="CloseAll()">关闭全部</a-button>
          </template>
          <a-button icon="down"></a-button>
        </a-popover>
      </span>
    </a-tabs>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { namespace, State, Mutation } from "vuex-class";
import { TabsType } from "~/models/HomePage/index";
import _ from "lodash/array";

const module = namespace("tabs");
const myBusiness = namespace("myBusiness");
const sessionStorage = namespace("sessionStorage");

@Component
export default class Tabs extends Vue {
  @module.Mutation("SET_PANES") setPanes;
  @module.Getter("getPanes") getPanes;
  @module.Mutation("RESET_PANES") resetPanes;
  @module.Getter("getjumpAddress") getjumpAddress;
  @myBusiness.State("Routeskey") Routeskey;
  @sessionStorage.State("itemRoute") itemRoute;
  activeKey: string = this.getPanes ? this.getPanes[0].key : "";
  newTabIndex: number = 0;
  panes: TabsType[] = this.getPanes;

  onEdit(targetKey, action) {
    this[action](targetKey);
  }

  tabClick(val) {
    const index = _.findIndex(this.getPanes, function(o) {
      return o.key === val;
    });
    const result = this.getPanes[index];
    this.$router.push({
      name: result.name
    });
  }

  remove(targetKey) {
    let activeKey = this.activeKey;
    let lastIndex;
    this.getPanes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.getPanes.filter(pane => pane.key !== targetKey);
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeKey = panes[lastIndex].key;
    }
    this.resetPanes(panes);
    this.activeKey = activeKey;
  }

  CloseOther() {
    const pans: any[] = this.getPanes;
    const activeKey: string = this.activeKey;
    const item: any[] = [];
    const index = _.findIndex(pans, function(o) {
      return o.key === activeKey;
    });
    if (index !== 0) {
      item.push(this.getPanes[0]);
    }
    item.push(pans[index]);
    this.resetPanes(item);
  }

  CloseAll() {
    this.resetPanes([this.getPanes[0]]);
  }

  created() {
    if (this.Routeskey) {
      this.activeKey = this.Routeskey.routes.key;
    } else {
      this.activeKey = this.itemRoute[0].key;
    }
  }

  @Watch("getPanes")
  watchPanes(newValue: any[], olValue: any[]) {
    const _this: any = this;
    const index = _.findIndex(newValue, function(o) {
      return o.name === _this.getjumpAddress;
    });
    const val = newValue[index !== -1 ? index : newValue.length - 1];
    this.activeKey = val.key;
    _this.$router.push({
      name: val.name
    });
  }
}
</script>
<style lang="less">
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-wrap {
  width: calc(100vw - 300px);
}
</style>
